<template>
  <div class="music">
    <img :src="data.music.picImg" alt="" :class="{nameImg_active:data.isShowPlayBtn,nameImg_paused:!data.isShowPlayBtn}" />
    <div class="music-item">
      <p class="music-name">{{ data.music.name }}</p>
      <div class="music-icon">
        <svg class="icon" aria-hidden="true" @click="previousMusic">
          <use :xlink:href="icon1"></use>
        </svg>
        <svg
          class="icon"
          aria-hidden="true"
          v-if="data.isShowPlayBtn"
          @click="handleAudio(false)"
        >
          <use :xlink:href="icon2"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-else @click="handleAudio(true)">
          <use :xlink:href="icon3"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="nextMusic">
          <use :xlink:href="icon4"></use>
        </svg>
      </div>
      <audio
        ref="audio"
        @canplaythrough="handleLoad"
        @ended="nextMusic"
        :src="`https://music.163.com/song/media/outer/url?id=${data.music.id}.mp3`"
      ></audio>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, toRefs, watch, ref } from "vue";
import { useHomeStore } from "@/stores/home.js";
const store = useHomeStore();
const data = reactive({
  icon1: "#icon-shangyishou-yuanshijituantubiao",
  icon2: "#icon-zanting1",
  icon3: "#icon-bofang",
  icon4: "#icon-xiayishou-yuanshijituantubiao",
  isShowPlayBtn: false,
  index: 0,
  music: {
    id: 346089,
    name: "Beyond-海阔天空",
    picImg:
      "https://img1.baidu.com/it/u=1030351456,3187138141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714",
  },
  musicList: [
    {
      id: 346089,
      name: "Beyond-海阔天空",
      picImg:
        "https://img1.baidu.com/it/u=1030351456,3187138141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=714",
    },
    {
      id: 1931454277,
      // id: 25721221,
      name: "Beyond-灰色轨迹(1991)",
      picImg:
        "https://p1.music.126.net/XcSfbUzatJ5dHBVj4VwZYA==/109951166291796934.jpg?param=34y34",
    },
   
    {
      id: 5260311,
      name: "陈奕迅-葡萄成熟时",
      picImg:
        "	https://p1.music.126.net/eVNxevw1W5lyBmdq18tMJw==/109951163639097093.jpg?param=130y130",
    },
    {
      id: 64561,
      name: "陈奕迅-单车",
      picImg:
        "	https://p1.music.126.net/eVNxevw1W5lyBmdq18tMJw==/109951163639097093.jpg?param=130y130",
    },
    {
      id: 64599,
      name: "陈奕迅-明年今日",
      picImg:
        "	https://p1.music.126.net/eVNxevw1W5lyBmdq18tMJw==/109951163639097093.jpg?param=130y130",
    },
    {
      // id: 347568,
      id: 2131237571,
      name: "Beyond-谁伴我闯荡 (Live)",
      picImg:
        "https://p1.music.126.net/XcSfbUzatJ5dHBVj4VwZYA==/109951166291796934.jpg?param=34y34",
    },
    {
      id: 346591,
      name: "Beyond-无尽空虚",
      picImg:
        "http://p2.music.126.net/JOJvZc_7SqQjKf8TktQ_bw==/29686813951246.jpg?param=130y130",
    },
    {
      id: 28234006,
      name: "Beyond-真的爱你",
      picImg:
        "http://p2.music.126.net/JOJvZc_7SqQjKf8TktQ_bw==/29686813951246.jpg?param=130y130",
    },
  ],
});
const { icon1, icon2, icon3, icon4 } = toRefs(data);
watch(
  () => store.theme,
  (newVal, oldVal) => {
    // console.log(newVal, oldVal);
    if (newVal) {
      data.icon1 = "#icon-shangyishou-yuanshijituantubiao-copy";
      data.icon2 = "#icon-zanting1-copy";
      data.icon3 = "#icon-bofang-copy";
      data.icon4 = "#icon-xiayishou-yuanshijituantubiao-copy";
      //   console.log("#icon-zanting1-copy");
    } else {
      data.icon1 = "#icon-shangyishou-yuanshijituantubiao";
      data.icon2 = "#icon-zanting1";
      data.icon3 = "#icon-bofang";
      data.icon4 = "#icon-xiayishou-yuanshijituantubiao";
      //   console.log("#icon-zanting1");
    }
  },
  {
    deep: true,
  }
);
const audio = ref();
const handleAudio = (bool) => {
  // console.log(audio);
  data.isShowPlayBtn = bool;
  if (data.isShowPlayBtn) {
    audio.value.play();
  } else {
    audio.value.pause();
  }
};
const previousMusic = () => {
  // console.log("上一首");
  data.isShowPlayBtn = true;
  if (data.index <= 0) {
    data.index = data.musicList.length - 1;
    data.music = data.musicList[data.index];
  } else {
    data.index--;
    data.music = data.musicList[data.index];
  }
};
const nextMusic = () => {
  data.isShowPlayBtn = true;
  if (data.index === data.musicList.length - 1) {
    data.index = 0;
    data.music = data.musicList[data.index];
    audio.value.play();
  } else {
    data.index++;
    data.music = data.musicList[data.index];
    audio.value.play();
  }
};
const handleLoad = () => {
  if (data.isShowPlayBtn) {
    audio.value.play();
  }
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.music {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10px;
  img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 3px 0 0 5px;
    animation: rotated 10s infinite linear;
  }
  .nameImg_active {
    animation-play-state: running;
  }
  .nameImg_paused {
    animation-play-state: paused;
  }
  @keyframes rotated {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  .music-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    .music-name {
      font-size: 12px;
      margin-left: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }
    .music-icon {
      display: flex;
      align-items: center;
      .icon {
        cursor: pointer;
        width: 25px;
        height: 25px;
      }
      .iconBg {
        fill: #fff !important;
      }
      .icon:nth-child(2) {
        width: 25px;
        height: 25px;
      }
    }
  }
}
</style>